<script setup>
import { ref } from 'vue'
// 原数组
const data = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209201443_41fb0bb47d46874e982822c1b6e14b07.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1c5909c8e91f871efaf94e2159b6f85e.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6594e9856ed024575434d7d81d86e868.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dc7c9f2277e5181fc3d3ee2320246f26.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const List = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e79891260659fa51cac50f64c4e4147d.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f924ad94c8c598766a0d60bee5ca7006.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205211919_7f0456d9b7b282c920292d2206cc1ee4.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202211281418_1bbeb41e0862ec2c21476ba94f6ba2e5.png',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
// 第二个按钮的数据
const OneData = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660223796.35899366.jpg',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202401081111_01ffd89f94aa6d02b26d4f6a91af1b37.png',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202404231518_302d1e1b856ffab8eddfe332c5b3380c.png',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281743_e6a0c14843e90f84645acee681242573.png',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const OneDatas = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202404231621_0bc2e2311a88de01c837abcadcae17ad.png',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202404231518_302d1e1b856ffab8eddfe332c5b3380c.png',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202404231518_302d1e1b856ffab8eddfe332c5b3380c.png',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202404251650_e01e39baa89397591819e2eb4018af44.png',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
// 第三个按钮的数据
const TowData = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b5e7b8356420596e2116ca901e11cb7b.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d96feb0267ddea24666b32a28984a83b.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6cb309bfab923dd888a569e1b62e44ba.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f9f6b78a4e55001a0dffed85c099bfb0.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const TowDatas = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/07390d2d89220f2e3f06710360ec1077.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209261417_25cc1c7fffc0d1d81e4db1b641db76ca.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205201909_0c600f8b38a0c5de1354c613dffa28b4.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208301420_72bbba99dfeac7f5c818a63e0e5f24e4.jpg?thumb=1&w=100&h=100&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
// 第四个按钮的数据
const forData = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0fabb6c16cbadaf300da4a2c2ffb9afa.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3b6a47f33993a59ff3a5c1112d484eed.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d9990f4266c0fb20482d637618fe9366.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1612c93ad4756215774a0dbec7a81bb2.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const forDatas = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bb1e375d2beca06b684650de635520df.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f69003fc4b34010c2d69d9a23a76ba39.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d13eee83c8e9487256ad14befc4f7d46.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205202040_62a3156576af2ac79910581abe324e4b.png?thumb=1&w=100&h=100&f=webp&q=90',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
// 恢复的原来的数据
const serrData = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209201443_41fb0bb47d46874e982822c1b6e14b07.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1c5909c8e91f871efaf94e2159b6f85e.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6594e9856ed024575434d7d81d86e868.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dc7c9f2277e5181fc3d3ee2320246f26.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const serrDatas = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e79891260659fa51cac50f64c4e4147d.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f924ad94c8c598766a0d60bee5ca7006.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205211919_7f0456d9b7b282c920292d2206cc1ee4.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202211281418_1bbeb41e0862ec2c21476ba94f6ba2e5.png',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const addTv = () => {
  data.value = OneData.value
  List.value = OneDatas.value
}
const addKt = () => {
  data.value = TowData.value
  List.value = TowDatas.value
}
const addnice = () => {
  data.value = forData.value
  List.value = forDatas.value
}
const addHot = () => {
  data.value = serrData.value
  List.value = serrDatas.value
}
</script>
<template>
  <div style="margin-top: 80px">
    <div class="common-layout">
      <el-container>
        <el-header>
          <h1>厨房电器</h1>
          <h1 style="text-align: center" class="more">
            <span class="One" @click="addHot">净水器&nbsp;&nbsp;&nbsp;</span>
            <span class="Two" @click="addTv">烟灶&nbsp;&nbsp;&nbsp;</span>
            <span class="seer" @click="addKt">电饭煲&nbsp;&nbsp;&nbsp;</span>
            <span class="seer" @click="addnice">微蒸烤</span>
          </h1>
        </el-header>
        <el-container>
          <el-aside class="leftimg" width="234px">
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d0a92bc19df74c4da59563206321320a.jpg?thumb=1&w=234&h=300&f=webp&q=90"
            />
          </el-aside>
          <el-main>
            <div class="container">
              <div
                class="item"
                v-for="item in data"
                :key="item.id"
                style="width: 234px"
              >
                <img :src="item.src" class="image" style="width: 250px" />
                <div class="text">
                  <p class="one">{{ item.oname }}</p>
                  <p class="tow">{{ item.tname }}</p>
                  <p class="seer">
                    {{ item.sname }}&nbsp;
                    <del style="color: #b0b0b0">{{ item.delname }}</del>
                  </p>
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>
      <el-container>
        <el-header> </el-header>
        <el-container>
          <el-aside class="leftimg" width="234px">
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/00c61477413eb05a67b1ec032a148121.png?thumb=1&w=234&h=300&f=webp&q=90"
            />
          </el-aside>
          <el-main>
            <div class="container">
              <div
                class="item"
                v-for="item in List"
                :key="item.id"
                style="width: 234px"
              >
                <img :src="item.src" class="image" style="width: 250px" />
                <div class="text">
                  <p class="one">{{ item.oname }}</p>
                  <p class="tow">{{ item.tname }}</p>
                  <p class="seer">
                    {{ item.sname }}&nbsp;
                    <del style="color: #b0b0b0">{{ item.delname }}</del>
                  </p>
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<style scoped lang="scss">
.common-layout {
  overflow: hidden;
  width: 1500px;
  height: 750px;
  margin: 1px auto;
  .leftimg {
    transition: all 0.5s;
    img {
      width: 243px;
      height: 300px;
    }
    &:hover {
      cursor: pointer;
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }
  }
  .el-header {
    display: flex;
    justify-content: space-between;
    .more {
      display: flex;
      align-items: center;
      .One {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .Two {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .seer {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
    }
  }
  .el-main {
    padding: 0;
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        text-align: center;
        flex-basis: 25%;
        transition: all 0.5s;
        &:hover {
          cursor: pointer;
          transform: translate3d(0, -3px, 0);
          box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
        .text {
          .one {
            font-size: 12px;
          }
          .tow {
            color: #b0b0b0;
          }
          .seer {
            color: #e26237;
          }
        }
      }
    }
  }
}
.common {
  overflow: hidden;
  width: 1500px;
  height: 800px;
  margin: 1px auto;
  .leftimg {
    transition: all 0.5s;
    img {
      width: 243px;
      height: 300px;
    }
    &:hover {
      cursor: pointer;
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }
  }
  .el-header {
    display: flex;
    justify-content: space-between;
    .more {
      display: flex;
      align-items: center;
      .One {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .Two {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .seer {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
    }
  }
  .el-main {
    padding: 0;
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        text-align: center;
        flex-basis: 25%;
        transition: all 0.5s;
        &:hover {
          cursor: pointer;
          transform: translate3d(0, -3px, 0);
          box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
        .text {
          .one {
            font-size: 12px;
          }
          .tow {
            color: #b0b0b0;
          }
          .seer {
            color: #e26237;
          }
        }
      }
    }
  }
}
</style>
